<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%">

      <el-table-column
        prop="date"
        label="日期123"
        width="180">
      </el-table-column>

      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>

      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>

      <el-table-column
        label="性别">
        <!-- 作用域插槽 -->
          <!-- 
          1. slot-scope是固定写法
          2. scope（作用域）。理解为变量，并不一定需要固定这个名字，el-table-column组件会自动将渲染本行需要的数据
          传给scope，其中scope.row就表示当前行的数据，它对应数据源中的某个对象。这里的row是 el-table-column组件 的固定写法
          3. {{ 方法() }} 的作用是执行这个方法，将返回值显示在当前单元格中
          -->
        <!-- 男~女 -->
        <template slot-scope="scope">
          {{ transGender(scope.row) }}
        </template>

      </el-table-column>

      <el-table-column label="操作">  
        按钮 
        <el-button type="danger">删除</el-button>
      </el-table-column>

    </el-table>

    <!-- 分页 
      total: 一共有1000条数据
      默认情况下，每页显示10条
    -->
    <el-pagination
      background
      layout="prev, pager, next"
      @current-change="hCurrentChange"
      :total="1000">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            date: '2016-05-04',
            name: '王小花',
            address: '上海市普陀区金沙江路 1517 弄',
            gender: 0
          },
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            gender: 1
          }
        ]
      }
    },
    methods: {
      // 翻页时，会自动传入当前的页码
      hCurrentChange (curPage) {
        console.log('当前的页码', curPage)

        // 假设从后端获取数据
        this.tableData =  [
          {
            date: '2016-05-06',
            name: '王小花',
            address: '上海市普陀区金沙江路 1517 弄',
            gender: 0
          },
          {
            date: '2016-05-08',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            gender: 1
          }
        ]
      },
      // 改变性别的显示
      transGender(data) {
        console.log(data.gender)
        if(data.gender === 1) {
          return '男'
        } else {
          return '女'
        }
      }
    },
  }
</script>